<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>申请售后</title>
		<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<link rel="stylesheet" href="../../../css/vant.css">
		<style type="text/css">
			.choice {
				color: #B3B3B3;
				background-color: #F5F5F5;
				height: 2rem;
				line-height: 2rem;
				border-radius: 0.25rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-left: 0.6rem;
				padding-right: 0.45rem;
				margin-bottom: 1rem;
			}

			textarea {
				font-size: 0.65rem;
				/*color: #B3B3B3;*/
				height: 7rem;
				line-height: 1.5;
				padding-top: 0.7rem;
				/*padding-left: 0.65rem;*/
				border-radius: 0.25rem;
				background-color: #Fff;
			}

			.aui-row img {
				border-radius: 0.25rem;
			}

			.aui-btn-block {
				display: inline-block;
				width: 17.25rem;
				height: 2.3rem;
				line-height: 2.3rem;
				color: #FFFFFF;
				margin-left: 50%;
				transform: translateX(-50%);
				/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
				/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
				/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
				background:#005A93;
				font-size:.8rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(255,255,255,1);
			}

			.aui-btn {
				border-radius: 0.3rem;
			}
			.aui-btn:active {
	color: #fff;
	background-color: rgba(0,90,147,0.8)
}
			.text-default {
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
			}
			.text-default_new{
				color:rgba(187,187,187,1)!important;
			}

			::placeholder {
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(187,187,187,1);
			}

			.resource {
				float:left;
				display:inline-block;
				float:left;
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(34,34,34,1);
			}

			.info-lis {
				display:inline-block;
				width:3rem;
				float:right;
			}

			.info-lis>span:nth-child(1) {
				display:inline-block;
				float:left;
				width:6rem;
				margin-left:-3.5rem;
				text-align:right;
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(187,187,187,1);
			}

			.info-lis>span:nth-child(2) {
				display:inline-block;
				float:left;
				width: .5rem;
				height:1rem;
			}

			.info-content {
				position: relative;
			}
			.info-content>textarea {
				background-color: #fff;
				padding-top: 0.2rem;
			}
			.info-content>div {
				position: absolute;
				bottom: 0.5rem;
				right: 1rem;
				color: #B3B3B3;
				margin-right:-.8rem;
				font-size:.6rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(187,187,187,1);
			}

			.num-lis {
				background-color:#fff;
				height:2.75rem;
				display:flex;
				padding:0 .75rem;
				margin-top:.5rem;
			}
			.num-lis>span {
				flex:1;
				margin:auto;
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(34,34,34,1);
			}
			.num-lis>div {
				flex:1;margin:auto;
			}
			.num-lis>div>div {
				width:3.85rem;
				height:1.1rem;
				line-height:1.1rem;
				border:1px solid #E1E1E5;
				display:flex;
				text-align:center;
				float:right;
				color:#323233;
			}

			.num-lis>div>div img {
				width:.4rem;
				margin:50%;
				transform:translate(-50%,-50%);
			}

			.info-update {
				margin-top:.55rem;
				padding:0 .8rem;
			}
			.info-update>div:nth-child(1) {
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(34,34,34,1);
			}
			.info-update>div:nth-child(2) {
				overflow: inherit !important;
				margin-top:.75rem;
			}

			.info-key>div {
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(34,34,34,1);
			}

			.god-font-size {
				font-size: 0.7rem !important;
				font-weight: 500 !important;
				color: rgba(46, 46, 46, 1) !important;
			}

			.van-stepper {
				display: flex;
			}

			.van-stepper__input {
				box-sizing: border-box !important;
				width: 32px !important;
				height: 28px !important;
				margin: 0 2px !important;
				padding: 0 !important;
				color: #323233 !important;
				font-size: 14px !important;
				text-align: center !important;
				vertical-align: middle !important;
				background-color: #f2f3f5 !important;
				border: 0 !important;
				border-width: 1px 0 !important;
				border-radius: 0 !important;
				-webkit-appearance: none !important;
		}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 退款原因 -->
			<div class="ming-bg-white aui-margin-b-10" style="padding-bottom: 2rem;padding:0 .75rem;">
				<div class="aui-border-b" style="display:inline-block;width:100%;height:2.75rem;margin-bottom:0">
					<div class="aui-padded-t-15 aui-padded-b-10 resource">
						退款/退货原因 <span style="color:red">*</span>
					</div>
					<div class="aui-margin-t-15 info-lis" tapmode onclick="open_sel_return_cause()">
						<span  style="color:rgba(102,102,102,1);" :class="{'text-default':return_cause!='请选择','text-default_new':return_cause=='请选择'}">
							{{return_cause}}
						</span>
						<span><img src="../../../image/icon/icon-right.png" /></span>
					</div>
				</div>
				<div class="info-content" style="">
					<textarea v-model="description" maxlength="50" placeholder="问题描述" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);"></textarea>
					<div>{{description.length}}/50</div>
				</div>
			</div>

			<!-- 商品数量 -->
			<div style="background:#fff;padding:15px;display:none">

				<div class="god-font-size flex-box-x">
					<div class="col-xs-x">退货数量</div>
					<div class="add_decrease_count flex-y-center">
						<van-stepper v-model="count" min="1" :max="good_num" />
					</div>
				</div>
				<!-- <span>商品数量</span> -->
				<div>
					<!-- 商品数量未定义 -->
					<!-- <div class="aui-font-size-12">
							<span style="flex:2;border-right:1px solid #E1E1E5;">
								<img src="../../../image/icon/icon-cut-none.png">
								<img src="../../../image/icon/icon-cut.png">
							</span>
							<span style="flex:3;border-right:1px solid #E1E1E5;">1</span>
							<span style="flex:2;">
								<img src="../../../image/icon/icon-plus-none.png">
								<img src="../../../image/icon/icon-plus.png">
							</span>
					</div> -->
				</div>
			</div>

			<!-- 上传凭证 -->
			<div class="ming-bg-white aui-padded-b-10 aui-margin-b-10 info-update">
				<div class="aui-font-size-15 aui-padded-t-15">
					上传凭证(最多3张)
				</div>
				<div class="aui-row aui-row-padded">
					<div v-for="vo,index in imgs_path" class="aui-col-xs-2" style="width:20%;">
						<img :src="vo" style="width:3rem;height:3rem;"/>
						<img tapmode @click="imgs_path.splice(index,1);imgs.splice(index,1)" style="position: absolute;top: -0.25rem;right:-0.03rem;width: .8rem;height:0.8rem;z-index:1000" src="../../../image/btn/btn-delete_new.png" />
					</div>
					<div v-if="imgs.length<3" tapmode @click="sel_imgs" class="aui-col-xs-2" style="width:20%;">
						<img src="../../../image/bg/addpicture.png" style="width:3rem;height:3rem;"/>
					</div>
				</div>
				<div class="aui-clearfix"></div>
			</div>

			<!-- 联系方式 -->
			<div class=" ming-bg-white" style="margin-bottom: 5rem;padding:0 .8rem;">
				<!-- <div class="aui-padded-t-5 aui-padded-b-10 aui-font-size-16">
					联系方式
				</div> -->
				<div class="info-key aui-margin-b-15 aui-border-b" style="height: 3rem; line-height: 3rem;display:flex;">
					<div class="" style="flex:1;text-align:left;">
						联系人姓名<span style="color:red">*</span>
					</div>
					<input style="height: 3rem;flex:1;text-align:right;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);" type="text" v-model="username" class="aui-font-size-15" placeholder="请输入" />
				</div>

				<div class="info-key" style="height: 3rem; line-height: 3rem;display:flex;">
					<div class="" style="flex:1;text-align:left;flex:1;">
						联系人电话<span style="color:red">*</span>
					</div>
					<input style="height: 3rem;flex:1;text-align:right;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);" type="tel" v-model="mobile" maxlength="11" class="aui-font-size-15" placeholder="请输入" />
				</div>
			</div>
			<div tapmode onclick="createAfterService()" class="aui-padded-10" style="position: fixed;bottom: 0;width: 100%;">
				<div class="aui-btn aui-btn-block">
					提交
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../../script/api.js"></script>
	<script type="text/javascript" src="../../../script/common.js"></script>
	<script type="text/javascript" src="../../../script/vue.js"></script>
	<script type="text/javascript" src="../../../script/aui-actionsheet.js"></script>
	<script type="text/javascript" src="../../../script/vant.min.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				order_id: 0,
				order_extend_id: 0,
				return_cause: '请选择',
				description: '',
				imgs: [],
				imgs_path: [],
				username: '',
				mobile: '',
				good_num:1,
				count:1
			},
			methods: {
				sel_imgs: function() {
					select_pic(function(ret) {
						var pic_path = ret.data
						post_img('api/UpFiles/upload', pic_path, function(ret) {
							if(ret.status) {
								vm.imgs.push(ret.data.pic_id);
								vm.imgs_path.push(ret.data.url);
							}
						})
					})
				}
			}
		})
		apiready = function() {
			vm.order_id = $api.getStorage('order_id')
			console.log(vm.order_id);
			console.log($api.getStorage('token'))
			get_data('api/Order/getOrderNum', {
				token: $api.getStorage('token'),
				order_id: vm.order_id
			}, function (ret) {
          // alert(JSON.stringify(ret))
					vm.good_num = ret.data.good_num;
			});

			vm.order_extend_id = $api.getStorage('aftersale')
			console.log(vm.order_extend_id);

		}

		function createAfterService() {
			if(vm.description==''){
				toast('请输入退款/退货原因');
				return;
			}
			// if(vm.imgs.length < 1) {
			// 	toast('请上传图片凭证');
			// 	return;
			// }
			if(vm.username == '') {
				toast('请输入联系人姓名');
				return;
			}
			if(vm.mobile == '') {
				toast('请输入联系方式');
				return;
			}



			// console.log(vm.order_id);

			get_data('api/OrderAfterService/createAfterService', {
				token: $api.getStorage('token'),
				order_id: vm.order_id,
				order_extend_id: vm.order_extend_id,
				return_cause: vm.return_cause,
				description: vm.description,
				imgs: vm.imgs.join(','),
				username: vm.username,
				mobile: vm.mobile,
				good_num:vm.good_num
			}, function(ret) {
				if(ret.status) {
					toast('提交成功')
					send_event('order_chang')
					send_event('logined')
//					toast提示：提交成功，页面跳转到提交成功页面
					// $api.setStorage('id',ret.data.id)
					$api.setStorage('id',ret.data.id)
					open_win('aftersale_result','aftersale_result.html',false)
					setTimeout(function(){
						close_win()
					},1000)
				}
			})
		}

		function open_sel_return_cause() {
			var UIActionSelector = api.require('UIActionSelector');
			UIActionSelector.open({
			    datas:  [{
						"name": '质量问题',
						"id": '0'
					}, {
						"name": '少发错发漏发',
						"id": '1'
					}, {
						"name": '包装/商品残破',
						"id": '2'
					}, {
						"name": '其他',
						"id": '3'
					}],
			    layout: {
						row: 3,
						col: 1,
						height: 50,
						size: 13,
						sizeActive: 15,
						rowSpacing: 5,
						colSpacing: 10,
						maskBg: 'rgba(0,0,0,0.2)',
						bg: '#fff',
						color: '#999',
						colorActive: '#999',
						colorSelected: '#999',
						leftMargin: 35, //（可选项）数字类型；选择器分割线的左边距；默认：0
						rightMargin: 35,
			    },
					animation: true,
					cancel: {
						text: '取消',
						size: 18,
						w: 90,
						h: 43,
						bg: 'rgba(0,0,0,0)',
						bgActive: 'rgba(0,0,0,0)',
						color: '#999',
						colorActive: '#999'
					},
					ok: {
						text: '确定',
						size: 18,
						w: 90,
						h: 43,
						bg: 'rgba(0,0,0,0)',
						bgActive: 'rgba(0,0,0,0)',
						color: '#005A93',
						colorActive: '#005A93'
					},
					title: {
						text: '',
						size: 12,
						h: 44,
						bg: '#fff',
						color: '#fff'
					},
					lineColor: '#E6E6E6',
					// actives: [4],
					fixedOn: api.frameName
			}, function(ret, err) {
				if(ret) {
					if(ret.eventType == 'ok') {
						vm.return_cause = ret.selectedInfo[0].name;
					}
				} else {
					console.log(JSON.stringify(err));
				}
			});
		}
	</script>

</html>
